<script setup lang="ts">
import { defineProps } from "vue";
import { Handle, Position } from "@vue-flow/core";
 
defineProps({
  id: String,
  data: Object
});
</script>
 
<template>
  <div class="custom-node">
    <div class="node-header">{{ data?.label }}</div>
 
    <!-- Handle 定义 -->
    <Handle
      type="source"
      :position="Position.Top"
      :id="'top-' + id"
      :style="{ background: '#4a5568' }"
    />
    
    <Handle
      type="source"
      :position="Position.Left"
      :id="'left-' + id"
      :style="{ background: '#4a5568' }"
    />
    <Handle
      type="source"
      :position="Position.Right"
      :id="'right-' + id"
      :style="{ background: '#4a5568' }"
    />
    <Handle
      type="source"
      :position="Position.Bottom"
      :id="'bottom-' + id"
      :style="{ background: '#4a5568' }"
    />
  </div>
</template>
 
<style scoped>
.custom-node {
  width: 120px;
  height: 40px;
  border-radius: 3px;
  background-color: #4a5568;
  color: white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.node-header {
  font-size: 14px;
  font-weight: bold;
}
</style>